<template>
  <div class="BillSetting">
    <div class="form-content">
      <el-form ref="pageForm" :model="pageForm" :rules="rules" label-width="100px" size="small">
        <el-form-item label="寄存单" prop="depositInfo">
          <!--v-model="pageForm.state"-->
          <el-switch v-model="pageForm.depositInfo" :active-value="true" :inactive-value="false" />
          <!--填写的项目-->
          <div class="txxm-item">
            <!--title-->
            <div class="item-title flexRSC">
              <h2 style="width: 170px">填写的项目</h2>
              <h2>必填或选填</h2>
            </div>
            <!--input输入 此处遍历-->
            <div
              v-for="(inputItem,itemIndex) in pageForm.depositColumn"
              :key="itemIndex"
              class="flexRSC input-list-item"
            >
              <el-form-item
                :prop="'depositColumn.' + itemIndex + '.name'"
                :rules="rules.depositName"
                line
              >
                <el-input
                  v-model.trim="inputItem.name"
                  maxlength="8"
                  class="input-width-150 input-item-lf"
                  placeholder="你要输入的字段"
                />
                <el-select
                  v-model="pageForm.depositColumn[itemIndex].require"
                  placeholder="请选择"
                  class="input-width-100"
                >
                  <el-option
                    v-for="item in chooseItemArr"
                    :key="item.require"
                    :label="item.label"
                    :value="item.require"
                  />
                </el-select>
                <el-button
                  type="text"
                  class="btn-text-rt"
                  @click.prevent="deleteProjectBtn('depositColumn',itemIndex)"
                >删除项目</el-button>
              </el-form-item>
            </div>
            <!--增加项目-->
            <div class="add-btn">
              <el-button type="text" @click.prevent="addBtnProject('depositColumn')">+ 增加项目</el-button>
            </div>
          </div>
        </el-form-item>

        <el-form-item label="支取单" prop="takeInfo">
          <!--v-model="pageForm.state"-->
          <el-switch v-model="pageForm.takeInfo" :active-value="true" :inactive-value="false" />
          <!--填写的项目-->
          <div class="txxm-item">
            <!--title-->
            <div class="item-title flexRSC">
              <h2 style="width: 170px">填写的项目</h2>
              <h2>必填或选填</h2>
            </div>
            <!--input输入 此处遍历-->
            <div
              v-for="(inputItem,itemIndex) in pageForm.takeColumn"
              :key="itemIndex"
              class="flexRSC input-list-item"
            >
              <el-form-item
                :prop="'takeColumn.' + itemIndex + '.name'"
                :rules="rules.takeName"
                line
              >
                <el-input
                  v-model.trim="inputItem.name"
                  maxlength="6"
                  class="input-width-150 input-item-lf"
                  placeholder="你要输入的字段"
                />
                <el-select
                  v-model="pageForm.takeColumn[itemIndex].require"
                  placeholder="请选择"
                  class="input-width-100"
                >
                  <el-option
                    v-for="item in chooseItemArr"
                    :key="item.require"
                    :label="item.label"
                    :value="item.require"
                  />
                </el-select>
                <el-button
                  type="text"
                  class="btn-text-rt"
                  @click.prevent="deleteProjectBtn('takeColumn',itemIndex)"
                >删除项目</el-button>
              </el-form-item>
            </div>
            <!--增加项目-->
            <div class="add-btn">
              <el-button type="text" @click.prevent="addBtnProject('takeColumn')">+ 增加项目</el-button>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="item-rt colCCA">
      <el-button size="medium" type="primary" round @click.prevent="confirmOrderBtn()">保存</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    // 自定义奖励说明校验
    const depositInfoValid = (rule, value, callback) => {
      console.log('depositInfoValid')
      console.log(value)
      if (value === true) {
        if (this.pageForm.depositColumn.length === 0) {
          callback(new Error('开启寄存单至少有一个项目'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    const takeInfoValid = (rule, value, callback) => {
      console.log('takeInfoValid')
      console.log(value)
      if (value === true) {
        if (this.pageForm.takeColumn.length === 0) {
          callback(new Error('开启支取单至少有一个项目'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    const validatorDepositName = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入项目名称'))
      } else {
        let count = 0
        this.pageForm.depositColumn.forEach(v => {
          if (value === v.name) {
            count += 1
          }
        })
        if (count > 1) {
          callback(new Error('项目名称重复'))
        } else {
          callback()
        }
      }
    }
    const validatorTakeName = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入项目名称'))
      } else {
        let count = 0
        this.pageForm.takeColumn.forEach(v => {
          if (value === v.name) {
            count += 1
          }
        })
        if (count > 1) {
          callback(new Error('项目名称重复'))
        } else {
          callback()
        }
      }
    }

    return {
      shopId: 1,
      pageForm: {
        depositInfo: true,
        shopId: 0,
        takeInfo: true,
        depositColumn: [],
        takeColumn: []
      },
      rules: {
        depositName: [
          {
            required: true,
            validator: validatorDepositName,
            trigger: ['blur', 'change']
          }
        ],
        takeName: [
          {
            required: true,
            validator: validatorTakeName,
            trigger: ['blur', 'change']
          }
        ],
        depositInfo: [
          {
            required: true,
            validator: depositInfoValid,
            trigger: ['blur', 'change']
          }
        ],
        takeInfo: [
          {
            required: true,
            validator: takeInfoValid,
            trigger: ['blur', 'change']
          }
        ]
      },
      chooseItemArr: [
        { require: false, label: '选填' },
        { require: true, label: '必填' }
      ]
    }
  },
  created() {},
  mounted() {},
  methods: {
    /* 数据请求*/
    /* 按钮点击*/
    addBtnProject(whichObj) {
      if (whichObj === 'depositColumn') {
        this.pageForm.depositColumn.push({ name: '', require: false })
      } else {
        this.pageForm.takeColumn.push({ name: '', require: false })
      }
    },
    deleteProjectBtn(whichObj, itemIndex) {
      if (whichObj === 'depositColumn') {
        this.pageForm.depositColumn.splice(itemIndex, 1)
      } else {
        this.pageForm.takeColumn.splice(itemIndex, 1)
      }
    },
    confirmOrderBtn() {
      // 校验表单
      this.$refs.pageForm.validate(async valid => {
        if (valid) {
          // 处理数据
          const reqData = JSON.parse(JSON.stringify(this.pageForm))
          reqData.depositColumn = JSON.stringify(reqData.depositColumn)
          reqData.takeColumn = JSON.stringify(reqData.takeColumn)
          reqData.shopId = this.shopId
          this.postBasicConfigReq(reqData)
        }
      })
    },
    /* other*/
    // 保存店铺配置
    postBasicConfigReq(reqData) {
      console.log(reqData)
      this.khReqMethod({
        url: '/depositAdmin/config/orderColumnConfig',
        data: reqData,
        method: 'post',
        isLoading: true
      }).then(async res => {
        if (res.code === 0) {
          this.$notify({
            title: '成功',
            message: '保存成功',
            type: 'success',
            duration: 2000,
            offset: 40
          })
        }
      })
    },
    // 获取店铺配置
    getBasicConfigReq(reqData) {
      const data = {
        shopId: this.shopId
      }
      this.khReqMethod({
        url: '/depositAdmin/config/orderColumnConfig',
        data,
        method: 'get',
        isLoading: true,
        isParams: true
      }).then(async res => {
        const repData = res.data
        this.pageForm = repData
        if (repData.depositColumn) {
          this.pageForm.depositColumn = JSON.parse(repData.depositColumn)
        } else {
          this.pageForm.depositColumn = []
        }
        if (repData.takeColumn) {
          this.pageForm.takeColumn = JSON.parse(repData.takeColumn)
        } else {
          this.pageForm.takeColumn = []
        }
      })
    },
    /* 控制显示的隐藏*/
    componentActive(passData) {
      this.shopId = passData.shopId
      this.getBasicConfigReq()
    }
  }
}
</script>

<style scoped lang="scss">
  .BillSetting {
    padding: 0 10px;
    margin-top: 5px;
  }
  .item-rt {
    margin: 50px;
  }
  .form-content {
    .txxm-item {
    }
    .input-list-item:not(:last-child) {
    }
    .input-item-lf {
      margin-right: 20px;
    }
    .btn-text-rt {
      margin-left: 15px;
    }

    //增加项目
    .add-btn {
    }
  }
</style>
